<template>
  <div id="page">
    <div class="search">
      <slot name="search"/>
    </div>
    <div class="table">
      <slot name="table"/>
    </div>
    <el-pagination
        :current-page.sync="pageCurrent"
        :page-size.sync="pageSize"
        :page-sizes="pageSizes"
        :total="pageTotal"
        background
        class="pagebar"
        layout="total,->,prev, pager, next, sizes "
        @size-change="loadPage"
        @current-change="loadPage"
    />
  </div>
</template>
<script>
export default {
  props: {
    queryPage: Function,
  },
  data() {
    return {
      pageCurrent: 1,
      pageSize: 10,
      pageTotal: 0,
      pageSizes: [10, 20, 50, 100],
    };
  },
  methods: {
    async loadPage() {
      let data = await this.queryPage(this.pageCurrent, this.pageSize);
      this.pageCurrent = data.current;
      this.pageTotal = data.total;
      this.pageData = data.records;
    },
    go(current) {
      if (current) {
        this.pageCurrent = current;
      }
      this.loadPage();
    },
  },
  created() {
    this.loadPage();
  },
};
</script>
<style scoped>
#page .search {
  margin-bottom: 10px;
}

#page .table {
  margin-bottom: 10px;
}

#page .pagebar {
  margin-bottom: 10px;
}
</style>